<template>
	<view :class="[$themeClass('page-bg-color')]">
		<!-- 头部 -->
		<!-- #ifndef APP-VUE -->
		<view class="ex-mall-header" :class="[$themeClass('header-bg-color')]">
			<!-- #ifdef MP-WEIXIN -->
			<view class="ex-mall-header-mp-weixin-fill" :class="[$themeClass('header-title-color')]">创建订单</view>
			<!-- #endif -->
			<view class="ex-mall-header-content">
				<view class="ex-mall-header-left">
					<view class="ex-mall-header-btn" @click="$util.navigateBack" :class="[$themeClass('header-btn-left-another-bg-color')]">
						<text class="ex-mall-header-btn-icon ri-arrow-left-s-line" :class="[$themeClass('header-btn-left-icon-another-color')]"></text>
					</view>
				</view>
				<view class="ex-mall-header-right">
					<view class="ex-mall-header-btn" :class="[addressIsValidated?$themeClass('search-btn-bg-color'):$themeClass('header-btn-right-another-bg-color')]">
						<text class="ex-mall-header-btn-icon ri-map-2-line" :class="[addressIsValidated?$themeClass('search-btn-color'):$themeClass('header-btn-right-icon-another-color')]"></text>
					</view>
					<view class="cut" :class="[$themeClass('border-color')]"></view>
					<view class="ex-mall-header-btn" :class="[paymentMethodIsValidated?$themeClass('search-btn-bg-color'):$themeClass('header-btn-right-another-bg-color')]">
						<text class="ex-mall-header-btn-icon ri-bank-card-2-line" :class="[paymentMethodIsValidated?$themeClass('search-btn-color'):$themeClass('header-btn-right-icon-another-color')]"></text>
					</view>
					<view class="cut" :class="[$themeClass('border-color')]"></view>
					<view class="ex-mall-header-btn" :class="[$themeClass('header-btn-right-another-bg-color')]">
						<text class="ex-mall-header-btn-icon ri-checkbox-circle-line" :class="[$themeClass('header-btn-right-icon-another-color')]"></text>
					</view>
				</view>
			</view>
		</view>
		<!-- #endif -->

		<view class="block address">
			<view class="title" :class="[$themeClass('panel-title-color')]">
				<view class="left">收货地址</view>
				<view class="right">修改地址</view>
			</view>
			<view class="info" :class="[$themeClass('panel-title-color')]">
				<text class="name">张三</text>
				<text class="mobile">15111111111</text>
				<text class="address">{{address.province+address.city+address.country+address.detail}}</text>
			</view>
			<view class="map-box">
				<map class="map" :longitude="map.longitude" :latitude="map.latitude" :markers="map.markers" @click="chooseLocation"></map>
			</view>
		</view>

		<view :class="[$themeClass('panel-bg-color')]">
			<view class="block goods" :class="[$themeClass('panel-content-bg-color')]">
				<view class="title" :class="[$themeClass('panel-title-color')]">
					<view class="left">购物车</view>
					<view class="right">2 商品</view>
				</view>
				<view class="list">
					<view class="item">
						<view class="thumbnail">
							<image class="img" mode="aspectFill"></image>
						</view>
						<view class="info" :class="[$themeClass('panel-title-color')]">
							<view class="title">客厅创意小柜<text class="spec">颜色灰白</text></view>
							<view class="price">￥197.00<text class="quantity">×2</text></view>
						</view>
					</view>
					<view class="item">
						<view class="thumbnail">
							<image class="img" mode="aspectFill"></image>
						</view>
						<view class="info" :class="[$themeClass('panel-title-color')]">
							<view class="title">客厅创意小柜<text class="spec">颜色灰白</text></view>
							<view class="price">￥197.00<text class="quantity">×2</text></view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="block remark">
			<view class="title" :class="[$themeClass('panel-title-color')]">
				<view class="left">订单备注</view>
			</view>
			<view class="box">
				<textarea class="text-area" :class="[$themeClass('search-input-bg-color'), $themeClass('search-input-color')]"
				 auto-height maxlength="300" placeholder="最多300字哦~"></textarea>
			</view>
		</view>

		<view class="block payment-method">
			<view class="title" :class="[$themeClass('panel-title-color')]">
				<view class="left">支付方式</view>
			</view>
			<view class="list">
				<view class="item" v-for="(x, xi) in paymentMethod" :key="xi">
					<view class="left">
						<view class="icon">
							<image class="img" :src="x.iconPath"></image>
						</view>
						<view class="name">{{x.name}}</view>
					</view>
					<view class="right">
						<view class="btn" @click="selectPaymentMethod(x)" :style="{'background-color': x.checked?null:'#F0F0F0'}" :class="[x.checked && [$themeClass('search-btn-bg-color'), $themeClass('search-btn-color')]]">
							<text class="icon ri-check-line"></text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="total" :class="[$themeClass('panel-title-color')]">
			<view class="box">
				<view class="left">总计</view>
				<view class="right">￥<text class="amount">300.00</text></view>
			</view>
		</view>

		<view class="submit">
			<view class="btn" @click="clickSubmit" :class="[$themeClass('search-btn-bg-color'), $themeClass('search-btn-color')]">提交订单</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				map: {
					longitude: 0,
					latitude: 0,
					markers: []
				},
				address: {
					name: '',
					province: '',
					country: '',
					city: '',
					detail: ''
				},
				paymentMethod: [{
					name: '微信支付',
					iconPath: '/static/icons/icon-weixin-pay.png'
				}, {
					name: '支付宝',
					iconPath: '/static/icons/icon-ali-pay.png'
				}]
			}
		},
		computed: {
			addressIsValidated() {
				// 检查收货地址信息是否是完整的
				for (let key in this.address) {
					if (!this.address[key]) {
						return false
					}
				}
				return true
			},
			paymentMethodIsValidated() {
				return this.paymentMethod.filter(x => x.checked).length > 0
			}
		},
		watch: {
			address() {
				// #ifdef APP-VUE
				uni.$emit('addressIsValidated', this.addressIsValidated)
				// #endif
			},
			paymentMethod() {
				// #ifdef APP-VUE
				uni.$emit('paymentMethodIsValidated', this.paymentMethodIsValidated)
				// #endif
			}
		},
		onReady() {
			// #ifdef APP-VUE
			this.showNVueHeader()
			// #endif
		},
		methods: {
			clickSubmit() {
				if (!this.addressIsValidated) {
					uni.showToast({
						icon: 'none',
						title: '收货地址信息不完整'
					})
					return
				}
				if (!this.paymentMethodIsValidated) {
					uni.showToast({
						icon: 'none',
						title: '请选择支付方式'
					})
					return
				}

				uni.showLoading({
					title: '订单提交中...'
				})
				setTimeout(() => {
					uni.showLoading({
						title: '支付中...'
					})
					setTimeout(() => {
						uni.redirectTo({
							url: '/pages/order/payresult'
						})
						uni.hideLoading()
					}, 1000)
				}, 1000)
			},
			selectPaymentMethod(item) {
				this.paymentMethod.forEach(x => this.$set(x, 'checked', false))
				item.checked = true
			},
			chooseLocation() {
				uni.chooseLocation({
					success: (res) => {
						try {
							var location = formatLocation(res)
							this.address = {
								province: location.REGION_PROVINCE,
								country: location.REGION_COUNTRY,
								city: location.REGION_CITY,
								detail: location.ADDRESS || location.NAME,
								name: location.NAME
							}
						} catch (e) {
							this.address = {
								province: '',
								country: '',
								city: '',
								detail: res.address,
								name: res.name
							}
						}
						this.map = {
							longitude: res.longitude,
							latitude: res.latitude,
							markers: [{
								longitude: res.longitude,
								latitude: res.latitude,
								iconPath: '/static/logo.png'
							}]
						}
					}
				})
			},
			showNVueHeader() {
				var systemInfo = uni.getSystemInfoSync()
				var height = `${systemInfo.statusBarHeight + 70}px`
				const header = uni.getSubNVueById('header') // 获取nvue
				header.setStyle({
					height
				})
				header.show() // 显示nvue
			}
		}
	}

	/**
	 * 格式化位置
	 * @param {*} res chooseLocation成功后返回参数
	 * 格式: {
		 address: "浙江省舟山市定海区昌国路61号"
		 errMsg: "chooseLocation:ok"
		 latitude: 30.019785
		 longitude: 122.106927
		 name: "舟山市定海区人民政府"
	   }
	 */
	function formatLocation(res) {
		var regex = /^(北京市|天津市|重庆市|上海市|香港特别行政区|澳门特别行政区)/;
		var REGION_PROVINCE = [];
		var addressBean = {
			REGION_PROVINCE: null,
			REGION_COUNTRY: null,
			REGION_CITY: null,
			ADDRESS: null,
			NAME: null
		};

		function regexAddressBean(address, addressBean) {
			// regex = /^(.*?[市州]|.*?地区|.*?特别行政区)(.*?[市区县])(.*?)$/g;
			regex = /^(.*?[市]|.*?地区|.*?特别行政区)(.*?[市区县])(.*?)$/g;
			var addxress = regex.exec(address);
			addressBean.REGION_CITY = addxress[1];
			addressBean.REGION_COUNTRY = addxress[2];
			addressBean.ADDRESS = addxress[3];
			addressBean.NAME = res.name;
			// console.log(addxress);
		}
		if (!(REGION_PROVINCE = regex.exec(res.address))) {
			regex = /^(.*?(省|自治区))(.*?)$/;
			REGION_PROVINCE = regex.exec(res.address);
			addressBean.REGION_PROVINCE = REGION_PROVINCE[1];
			regexAddressBean(REGION_PROVINCE[3], addressBean);
		} else {
			addressBean.REGION_PROVINCE = REGION_PROVINCE[1];
			regexAddressBean(res.address, addressBean);
		}
		return addressBean;
	}
</script>

<style lang="scss">
	.ex-mall-header-right {
		display: flex;
		align-items: center;

		&>.cut {
			width: 28px;
			margin: 0 5px;
			border-top: 1px dashed;
		}
	}

	.block {
		&>.title {
			display: flex;
			justify-content: space-between;
			padding: 0 28px;

			&>.left {
				font-size: 16px;
				font-weight: 600;
				// color: #292929;
			}

			&>.right {
				font-size: 14px;
				font-weight: 600;
				color: #9093A2;
			}
		}
	}

	.goods {
		margin-top: 32px;
		padding: 20px 0;
		border-radius: 34px 34px 0 0;

		&>.list {
			margin-top: 20px;

			&>.item {
				display: flex;
				align-items: center;
				margin-top: 20px;
				padding: 0 28px;

				&:first-child {
					margin-top: 0;
				}

				&:nth-child(4n-3) {
					&>.thumbnail {
						&>.img {
							background-color: #0EAA90;
						}
					}
				}

				&:nth-child(4n-2) {
					&>.thumbnail {
						&>.img {
							background-color: #F8E3DC;
						}
					}
				}

				&:nth-child(4n-1) {
					&>.thumbnail {
						&>.img {
							background-color: #A8A8A9;
						}
					}
				}

				&:nth-child(4n) {
					&>.thumbnail {
						&>.img {
							background-color: #7F8688;
						}
					}
				}

				&>.thumbnail {
					&>.img {
						display: block;
						width: 88px;
						height: 88px;
						border-radius: 12px;
					}
				}

				&>.info {
					margin: 0 18px;
					line-height: 1;

					&>.title {
						line-height: 1.3;
						font-size: 15px;
						font-weight: 600;

						&>.spec {
							margin-left: 0.5em;
							color: #808080;
						}
					}

					&>.price {
						margin-top: 10px;
						font-size: 13px;

						&>.quantity {
							margin-left: 0.5em;
							color: #808080;
						}
					}
				}
			}
		}
	}

	.address {
		position: relative;
		z-index: 0;
		padding-top: 32px;

		/* #ifdef APP-VUE */
		padding-top: calc(32px + 70px + var(--status-bar-height));
		/* #endif */

		&>.info {
			padding: 0 28px;
			margin-top: 20px;
			font-size: 14px;

			&>.name {
				margin-right: 10px;
				font-weight: 600;
			}

			&>.mobile {
				margin-right: 10px;
				font-weight: 600;
			}
		}

		&>.map-box {
			padding: 0 28px;
			margin-top: 20px;

			.map {
				width: 100%;
				height: 100px;
				border-radius: 12px;
				overflow: hidden;
			}
		}
	}

	.payment-method {
		padding-top: 52px;

		&>.list {
			margin-top: 20px;
			padding: 0 28px 28px 28px;

			&>.item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 84px;
				padding: 0 20px;
				margin-top: 20px;
				border-radius: 12px;
				background-color: #F7F7F7;
				overflow: hidden;

				&:first-child {
					margin-top: 0;
				}

				&>.left {
					display: flex;
					align-items: center;

					&>.icon {
						width: 28px;
						height: 28px;

						&>.img {
							display: block;
							width: 100%;
							height: 100%;
						}
					}

					&>.name {
						margin-left: 10px;
						font-size: 15px;
						font-weight: 600;
					}
				}

				&>.right {
					&>.btn {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 38px;
						height: 48px;
						border-radius: 12px;

						&>.icon {
							font-size: 18px;
						}
					}
				}
			}
		}
	}

	.remark {
		padding-top: 32px;

		&>.box {
			margin-top: 20px;
			padding: 0 28px;

			&>.text-area {
				width: 100%;
				min-height: 84px;
				padding: 12px;
				font-size: 14px;
				border-radius: 12px;
				box-sizing: border-box;
			}
		}
	}

	.total {
		padding: 0 28px;

		&>.box {
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			padding-top: 16px;
			border-top: 2px solid #F0F0F0;

			&>.left {
				font-size: 15px;
				// color: #292929;
			}

			&>.right {
				font-size: 15px;
				font-weight: 600;
				// color: #292929;

				&>.amount {
					font-size: 21px;
				}
			}
		}
	}

	.submit {
		margin-top: 32px;
		padding: 28px;

		&>.btn {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 58px;
			font-size: 14px;
			font-weight: 600;
			border-radius: 12px;
		}
	}
</style>
